<template>
    <div class="early" v-if="pop_stu">
        <div class="content_pop">
            <h1>实时预警记录</h1>
            <img
                class="close_img"
                @click.stop="pop_stu = false"
                src="../../assets/images/pop_close.png"
                alt=""
            />
            <div class="early_header">
                <div class="early_tab" @click="tab_stu = true;handleGetWarningPage()">
                    <div class="img">
                        <img
                            v-if="tab_stu"
                            src="../../assets/images/scan.png"
                            alt=""
                        />
                    </div>
                    <div class="tab_name">站内</div>
                </div>
                <div class="early_tab" @click="tab_stu = false;handleGetWarningPage()">
                    <div class="img">
                        <img
                            v-if="!tab_stu"
                            src="../../assets/images/scan.png"
                            alt=""
                        />
                    </div>
                    <div class="tab_name">站外</div>
                </div>
                <img
                    class="img1"
                    src="../../assets/images/question.png"
                    alt=""
                />
                <div
                    class="tab_active"
                    :style="tab_stu ? 'left:0' : 'left:76px'"
                ></div>
            </div>
            <div class="screen">
                <Select
                    class="selet1"
                    v-model="allResult"
                    @on-change="handleAllResult"
                    placeholder="全部预警结果"
                >
                    <Option :value="99">全部预警结果</Option>
                    <Option value="">筛选预警结果</Option>
                </Select>
                <Select
                    class="selet1"
                    :disabled="allResult == 99 ? true : false"
                    v-model="videoID"
                    @on-change="handleChangeList('videoID')"
                    placeholder="全部点位"
                >
                    <Option :value="0">全部点位</Option>
                    <Option
                        v-for="item in videos"
                        :key="item.id"
                        :value="item.id"
                        >{{ item.videoName }}</Option
                    >
                </Select>
                <Input
                    v-model="time"
                    type="number"
                    @on-enter="handleGetWarningPage()"
                    placeholder="请输入到当前时间的分钟数"
                    style="flex: 1"
                    @on-keyup="handleNumber()"
                />
                <!-- <div class="screen_time">
                     <DatePicker type="date" placeholder="请选择开始时间" style="width: 9.16vw"></DatePicker>
                    <span> — </span>
                     <DatePicker type="date" placeholder="请选择结束时间" style="width: 9.16vw"></DatePicker>
                </div> -->
                <Select
                    class="selet2"
                    :disabled="allResult == 99 ? true : false"
                    v-model="algoTypeID"
                    @on-change="handleChangeList('algoTypeID')"
                    placeholder="全部算法"
                >
                    <Option :value="0">全部算法</Option>
                    <Option
                        v-for="item in AlgorithmType"
                        :key="item.id"
                        :value="item.id"
                        >{{ item.typeName }}</Option
                    >
                </Select>
            </div>
            <div class="early_swiper">
                <Carousel ref="swiper" v-model="carousel" dots="none" arrow="never">
                    <CarouselItem v-for="(item, index) in list1" :key="index">
                        <div
                            class="early_swiper_item"
                            :class="layout==3?'early_swiper_item1':layout==2?'early_swiper_item2':''"
                            v-for="(item1, index) in item"
                            :key="index"
                            :style="
                                layout == 1
                                    ? 'width:100%;height:100%'
                                    : 'width:calc((100%/' +
                                      layout +
                                      ' - 12px));height:calc((100%/' +
                                      layout +
                                      ' - 12px))'
                            "
                        >
                            <img v-if="alarmImagePath" :src="item1.alarm.alarmImagePath" alt="" />
                            <video v-if="alarmVideoPath" autoplay :src="item1.alarm.alarmVideoPath"></video>
                            <div class="swiper_info">
                                <div class="info_top">
                                    <div class="info_left">
                                        <div class="time">{{UTCformat(item1.alarm.alarmDateTime)}}</div>
                                        <div class="addr">{{item1.alarm.video.location.locationName}}</div>
                                        <div class="device">{{item1.alarm.video.videoName}}</div>
                                    </div>
                                    <div class="status">
                                        <img
                                            :src="
                                                require('@/assets/images/' +
                                                    (item1.alarmStateDef
                                                        .stateName != '未处理'
                                                        ? 'check_active.png'
                                                        : 'check.png'))
                                            "
                                            alt=""
                                        />
                                        <p>
                                            {{ item1.alarmStateDef.stateName }}
                                        </p>
                                    </div>
                                </div>
                                <i></i>
                                <div class="info_bottom">
                                    {{ item1.alarm.algorithm.algorithmName }}
                                </div>
                            </div>
                        </div>
                    </CarouselItem>
                </Carousel>
                <div class="pop_left" @click="handleSwiper('left')">
                    <img src="../../assets/images/pop_left.png" alt="" />
                </div>
                <div class="pop_right" @click="handleSwiper('right')">
                    <img src="../../assets/images/pop_right.png" alt="" />
                </div>
            </div>
            <div class="early_footer">
                <div class="footer_layout">
                    <div
                        class="footer_layout_list"
                        v-for="v in 3"
                        :key="v"
                        @click="
                            layout = v;
                            handleListArray();
                        "
                    >
                        <div
                            class="footer_layout_item"
                            v-for="item1 in v * v"
                            :key="item1"
                            :class="v == layout ? 'active' : ''"
                            :style="
                                v == 1
                                    ? 'width:100%;height:100%'
                                    : 'width:calc((100%/' +
                                      v +
                                      ' - 1.5px));height:calc((100%/' +
                                      v +
                                      ' - 1.5px))'
                            "
                        ></div>
                    </div>
                    <div class="footer_txt">
                        <p>已核验{{ this.pageData.total - unCheckedSize }}</p>
                        <p>未核验{{ unCheckedSize }}</p>
                    </div>
                    <div class="footer_page">
                        <Page
                            :page-size="pageData.pageSize"
                            :current="pageData.pageIndex"
                            :total="pageData.total"
                             show-total
                            @on-change="handlePageChange"
                            show-elevator
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getWarningPage, getVideos, getAlgorithmType } from '@/api/homePop.js'
export default {
  data () {
    return {
      tab_stu: true,
      layout: 2,
      pop_stu: false,
      videos: [],
      videoID: 0,
      AlgorithmType: [],
      algoTypeID: 0,
      allResult: 99,
      time: 100000000,
      list: [],
      list1: '',
      unCheckedSize: '',
      carousel: 0,
      pageData: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted () {
    this.handleGetWarningPage()
    this.handleGetVideos()
    this.handleGetAlgorithmType()
  },
  methods: {
    handleGetAlgorithmType () {
      getAlgorithmType().then((res) => {
        this.AlgorithmType = res.data
      })
    },
    handleGetVideos () {
      getVideos().then((res) => {
        this.videos = res.data
      })
    },
    handleGetWarningPage () {
      getWarningPage({
        isInside: this.tab_stu ? 1 : 2,
        pageIndex: this.pageData.pageIndex,
        pageSize: this.pageData.pageSize,
        algoTypeID: this.algoTypeID,
        videoID: this.videoID,
        time: this.time
      }).then((res) => {
        this.pageData.total = res.data.allCount
        this.list = res.data.alarms
        this.unCheckedSize = res.data.unCheckedSize
        this.handleListArray()
      })
    },
    handleListArray () {
      this.carousel = 0
      let list = this.list
      const pages = []
      list.map((value, index) => {
        const page = Math.floor(index / (this.layout * this.layout))
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(value)
      })
      this.list1 = pages
    },
    handleNumber (e) {
      if (this.time === 0) {
        this.time = ''
      } else {
        this.time = this.time.replace(/\D/g, '')
      }
    },
    handleChangeList (key) {
      this.handleGetWarningPage()
    },
    handlePageChange (val) {
      this.pageData.pageIndex = val
      this.handleGetWarningPage()
    },
    handleAllResult () {
      if (this.allResult === 99) {
        this.videoID = 0
        this.algoTypeID = 0
        this.handleGetWarningPage()
      }
    },
    handleSwiper (val) {
      if (val === 'left') {
        this.$refs.swiper.arrowEvent(-1)
      } else {
        this.$refs.swiper.arrowEvent(1)
      }
    },
    handleOpenPop (val) {
      this.pop_stu = val.pop_stu
    },
    UTCformat (utc) {
      let date = new Date(utc)
      let year = date.getFullYear()
      let month = date.getMonth() + 1 > 9
        ? date.getMonth() + 1
        : '0' + parseInt(date.getMonth() + 1)
      let day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
      let hour = date.getHours() > 9
        ? date.getHours()
        : '0' + date.getHours()
      let minutes =
                    date.getMinutes() > 9
                      ? date.getMinutes()
                      : '0' + date.getMinutes()
      // let seconds =
      //             date.getSeconds() > 9
      //               ? date.getSeconds()
      //               : '0' + date.getSeconds()
      let res =
                year +
                '-' +
                month +
                '-' +
                day +
                ' ' +
                hour +
                ':' +
                minutes
                // +
                // ":" +
                // seconds;
      return res
    }
  }
}
</script>
<style lang="less" scoped>
.early {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    .content_pop {
        width: 135vh;
        height: 94vh;
        background: rgba(0, 0, 0, 0.45);
        border-radius: 6px 6px 6px 6px;
        padding: 0 15.87vh;
        position: relative;
        .close_img {
            width: 2.18vh;
            height: 2.18vh;
            position: absolute;
            right: 2.7vh;
            top: 2.7vh;
            cursor: pointer;
        }
        h1 {
            font-size: 2.91vh;
            color: #fff;
            margin-top: 2.7vh;
            text-align: center;
        }
        .early_footer {
            margin-top: 3.1vh;
            display: flex;
            position: relative;
            .footer_txt {
                display: flex;
                color: rgba(255, 255, 255, 0.85);
                font-size: 2vh;
                p {
                    margin-left: 1.7vh;
                }
            }
            .footer_page {
                position: absolute;
                right: 0;
                /deep/.ivu-page-prev {
                    background: rgba(255, 255, 255, 0.2);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    .ivu-icon-ios-arrow-back:before {
                        color: #ffffff;
                    }
                }
                /deep/.ivu-page-options-elevator {
                    input {
                        background: rgba(255, 255, 255, 0.2);
                        border: 1px solid rgba(255, 255, 255, 0.2);
                        color: #fff;
                    }
                }
                /deep/.ivu-page-item {
                    background: rgba(255, 255, 255, 0.2);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    a {
                        color: #ffffff;
                    }
                }
                /deep/.ivu-page-item-active {
                    background: #0078e3;
                }
                /deep/.ivu-page-next {
                    background: rgba(255, 255, 255, 0.2);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    .ivu-icon-ios-arrow-forward:before {
                        color: #ffffff;
                    }
                }
            }
            .footer_layout {
                display: flex;
                .footer_layout_list {
                    width: 2.91vh;
                    height: 2.91vh;
                    display: flex;
                    justify-content: space-between;
                    align-content: space-between;
                    flex-wrap: wrap;
                    margin-right: 2vh;
                    cursor: pointer;
                    .footer_layout_item {
                        background: #999;
                        border-radius: 1px;
                    }
                    .active {
                        background: #fff;
                    }
                }
            }
        }
        .early_swiper {
            margin-top: 2.1vh;
            height: 60.89vh;
            .pop_left {
                left: 6vh;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 3.86vh;
                height: 3.86vh;
                cursor: pointer;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .pop_right {
                right: 6vh;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 3.86vh;
                height: 3.86vh;
                cursor: pointer;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            /deep/.ivu-carousel {
                width: 100%;
                height: 100%;
                .ivu-carousel-list,
                .ivu-carousel-track {
                    height: 100%;
                }
                .ivu-carousel-item {
                    height: 100% !important;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-content: space-between;
                }
                // .early_swiper_item1{
                //     margin-right: 1%;
                // }
                // .early_swiper_item1:nth-child(3n) {
                //     margin-right: 0;
                // }
                // .early_swiper_item2{
                //     margin-right: 1%;
                // }
                // .early_swiper_item2:nth-child(2n) {
                //     margin-right: 0;
                // }
                .early_swiper_item {
                    position: relative;
                    background: #000;
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                    video{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                    .swiper_info {
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        // height: 27%;
                        background: rgba(255, 72, 61, 0.6);
                        z-index: 9;
                        padding: 0 1.25vw;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        padding-top: 3%;
                        padding-bottom: 3%;
                        .info_top {
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            margin-bottom: 0.3vw;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            .info_left {
                                display: flex;
                                font-size: 1vw;
                                color: #fff;
                            }
                            .time {
                            }
                            .addr {
                                margin-left: 1vw;
                            }
                            .device {
                                margin-left: 2vw;
                            }
                            .status {
                                display: flex;
                                align-items: center;
                                img {
                                    width: 1.2vw;
                                    height: 1.2vw;
                                }
                                p {
                                    margin-left: 0.3vw;
                                    line-height: 1;
                                    font-size: 1vw;
                                    color: #fff;
                                }
                            }
                        }
                        i {
                            display: inline-block;
                            width: 100%;
                            height: 1px;
                            background: rgba(255, 255, 255, 0.32);
                        }
                        .info_bottom {
                            margin-top: 0.3vw;
                            font-size: 1vw;
                            color: #fff;
                        }
                    }
                }
            }
        }
        .screen {
            display: flex;
            margin-top: 1vw;
            /deep/.selet1 {
                width: 9.78vw;
                margin-right: 0.5vw;
            }
            /deep/.selet2 {
                flex: 1;
                margin-left: 14px;
            }
        }
        .early_header {
            height: 44px;
            background: rgba(255, 255, 255, 0.3);
            margin-top: 2vw;
            display: flex;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
            padding-left: 7px;
            position: relative;
            align-items: center;
            .early_tab {
                display: flex;
                align-items: center;
                margin-right: 12px;
                cursor: pointer;
                .img {
                    width: 20px;
                    height: 20px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .tab_name {
                    font-size: 16px;
                    color: #fff;
                    padding-left: 12px;
                }
            }
            .img1 {
                width: 16px;
                height: 16px;
                cursor: pointer;
            }
            .tab_active {
                width: 34px;
                height: 1px;
                background: #fff;
                position: absolute;
                left: 0;
                bottom: 0;
                transition: left 0.3s;
            }
        }
    }
}
</style>
